<!-- eslint-disable jsdoc/no-multi-asterisks -->

<script setup lang="ts">
import type { BigNumber } from 'bignumber.js';
import bignumber from 'bignumber.js';
import CurrencyIcon from '../currency/CurrencyIcon.vue';
import Num from './Num.vue';

// 由于 Vue 目前不支持 Props `interface AmountProps extends CurrencyIconProps, NumProps{}` 多继承写法，所以暂时这样写
interface AmountProps {
  /** ****************** 与 Num 组件 Props 同步 ********************/
  /**
   * 数值
   */
  value: BigNumber.Value | undefined | null;
  /**
   * 小数位数
   */
  decimals?: number | [number, number];
  /**
   * 舍入方式
   *
   * - up: 向上取整
   * - down: 向下取整
   * - half-up: 四舍五入
   * - half-even: 银行家算法
   */
  round?: 'up' | 'down' | 'half-up' | 'half-even';
  /**
   * 格式化方式
   *
   * - original: 原始
   * - pad-dec: 自适应补零，即整数位多1位，小数位就少1位
   * - fixed-dec: 固定小数位数
   * - max-dec: 最大小数位数
   * - min-dec: 最小小数位数
   * - clamp-dec: 限制小数位数
   */
  format?: 'original' | 'pad-dec' | 'fixed-dec' | 'max-dec' | 'min-dec' | 'clamp-dec';
  /**
   * 着色
   *
   * - inherit: 继承
   * - neg: 负数
   * - pos: 正数
   * - full: 全部
   */
  colored?: 'inherit' | 'neg' | 'pos' | 'full';
  /**
   * 是否显示正数符号
   */
  showPos?: boolean;
  /**
   * 是否使用分组分隔符（千分符）
   */
  grouping?: boolean;
  /**
   * 是否弱化无价值的零值
   */
  weakPad?: boolean;

  /** ****************** 与 CurrencyIcon 组件 Props 同步 ********************/
  symbol?: string;
  size?: string;
  cdn?: string;
  iconType?: 'img' | 'text';

  /** ****************** 本组件的 Props ********************/
  /**  */
  iconPos?: 'left' | 'right' | 'hidden';
  useNumColor?: boolean;
  precision?: number;
}

const props = withDefaults(defineProps<AmountProps>(), {
  // Num 组件 Props
  value: () => bignumber(0),
  decimals: 8,
  round: 'down',
  weakPad: true,
  showPos: false,
  colored: 'inherit',
  format: 'original',
  grouping: true,

  // CurrencyIcon 组件 Props
  size: '1.1em',
  // symbol: '',
  iconType: 'img',

  // 本组件 Props
  iconPos: 'right',
  useNumColor: false,
  precision: 0,
});
</script>

<template>
  <span class="amount flex-inline" :class="[props.iconType === 'text' ? 'items-baseline' : 'items-center']">
    <CurrencyIcon v-if="props.iconPos === 'left' && props.symbol && !props.useNumColor" v-bind="props" class="currency-icon" />
    <Num v-bind="props" :value="bignumber(props.value ?? 0).dividedBy(10 ** props.precision)">
      <template #signLeft>
        <CurrencyIcon v-if="props.iconPos === 'left' && props.symbol && props.useNumColor" v-bind="props" class="currency-icon" />
      </template>
    </Num>
    <CurrencyIcon v-if="props.iconPos === 'right'" v-bind="props" class="currency-icon" />
  </span>
</template>

<style lang="scss" scoped>
.amount {
  line-height: 1em;
}
.symbol-icon {
  line-height: inherit;
  font-size: inherit;
}
.amount .currency-icon:first-child {
  margin-right: 0.15em;
}

.amount .currency-icon:last-child {
  margin-left: 0.15em;
}
</style>
